<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-23 14:29:50
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-23 14:55:15
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    发布者
    订阅者
    观察者
   -->

  <!-- 发布者 -->
  <input type="text">
  <!-- 订阅者 -->
  <div class="demo"></div>

  <!-- 观察者 Object.defineProperty(目标对象,目标对象中的属性,{6个属性：set,get,value,枚举，可选值，是否可写}) -->
  <script>
    /* 观察者 */
    // let target = {} //目标对象
    // Object.defineProperty(target, 'msg', {
    //   get () { },
    //   set (value) {
    //     console.log(value, 5);
    //     demo.innerHTML = value
    //     ipt.value = value
    //   }
    // })

    // let ipt = document.querySelector('input')
    // let demo = document.querySelector('.demo')
    // ipt.addEventListener('input', (e) => {
    //   console.log(e.target.value, 99);
    //   target.msg = e.target.value
    // })


    /* Proxy */
    let proxy = new Proxy({}, {
      // set (目标对象,key,value) {
      set (target, key, value) {
        console.log(target, key, value, 888);
        demo.innerHTML = value
        ipt.value = value
      }, // setter
      get () { } // getter  
    })

    let ipt = document.querySelector('input')
    let demo = document.querySelector('.demo')
    ipt.addEventListener('input', (e) => {
      console.log(e.target.value, 99);
      proxy.msg = e.target.value
    })
  </script>

</body>

</html>